{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/img/logo/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Toy Chat Application">
    <title>聊天室</title>

    <link rel="stylesheet" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">
    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/multichatstyle.css' %}" />
    <link rel="stylesheet" href="/static/css/footer.css">
    <link rel="stylesheet" href="/static/css/header.css">

    {% block head %}
    {% endblock %}

</head>

<body>

    {% include 'header.html' %}

    <div class="container">
        <div class="page-header">
            <h1>
                <small>点击一个房间进行聊天！</small>
            </h1>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div id="room-list" class="list-group">
                    <a href="" class="list-group-item disabled">
                        <h4 class="list-group-item-heading">房间</h4>
                        {% for room in rooms %}
                        <a class="room-link list-group-item" data-room-id="{{ room.id }}">{{ room }}</a>
                        {% empty %}
                        No
                        {% endfor %}

                    </a>
                </div>
            </div>
            <div class="col-md-8 p-0 " id="chats">


                {% comment %} <div class="room mt-0" id="room-3">
                    <h2>aaaaaa</h2>
                    <div class="messages">
                        <div class="message"><span class="username">admin</span><span class="body">asdf</span></div>
                    </div>
                    <form><div class="input-group mb-0">
                        <button class="btn btn-outline-secondary" type="button">:)</button>
                        <input type="text" class="form-control" placeholder="在这里输入..." >
                        <button class="btn btn-outline-secondary"  id="button-addon2">发送</button>
                      </div></form>
                </div> {% endcomment %}
            </div>
        </div>
    </div>


    <script>
        let sessionKey = '{{ request.session.session_key }}';
        let currentUser = '{{ request.user.username }}';
    </script>
    <script src="{% static 'js/multichat.js' %}"></script>
    <script src="{% static 'js/reconnecting-websocket.min.js' %}"></script>


</body>

</html>